<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-item {
            border: 1px solid #ddd;
            margin: 10px 0;
            padding: 15px;
            border-radius: 5px;
        }
        .success {
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }
        .loading {
            background-color: #fff3cd;
            border-color: #ffeaa7;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>光纤生产产线看板 - API连接测试</h1>
    
    <div>
        <button onclick="testAllApis()">测试所有API</button>
        <button onclick="clearResults()">清除结果</button>
    </div>
    
    <div id="test-results"></div>

    <script>
        const API_BASE_URL = 'http://localhost:19000';
        
        const endpoints = [
            { name: '仪表板数据', url: '/api/dashboard', method: 'GET' },
            { name: '进度数据', url: '/api/progress', method: 'GET' },
            { name: '品质数据', url: '/api/quality', method: 'GET' },
            { name: '管理数据', url: '/api/management', method: 'GET' },
            { name: '筛选选项', url: '/api/filters', method: 'GET' },
            { name: '刷新数据', url: '/api/refresh', method: 'GET' }
        ];
        
        function testAllApis() {
            const resultsDiv = document.getElementById('test-results');
            resultsDiv.innerHTML = '';
            
            endpoints.forEach((endpoint, index) => {
                testEndpoint(endpoint, index);
            });
        }
        
        function testEndpoint(endpoint, index) {
            const resultsDiv = document.getElementById('test-results');
            const testDiv = document.createElement('div');
            testDiv.className = 'test-item loading';
            testDiv.id = `test-${index}`;
            testDiv.innerHTML = `
                <h3>${endpoint.name} (${endpoint.method} ${endpoint.url})</h3>
                <p>测试中...</p>
            `;
            resultsDiv.appendChild(testDiv);
            
            const startTime = Date.now();
            
            fetch(`${API_BASE_URL}${endpoint.url}`, {
                method: endpoint.method,
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => {
                const endTime = Date.now();
                const duration = endTime - startTime;
                
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                
                return response.json().then(data => {
                    testDiv.className = 'test-item success';
                    testDiv.innerHTML = `
                        <h3>✅ ${endpoint.name} (${endpoint.method} ${endpoint.url})</h3>
                        <p><strong>状态:</strong> 成功</p>
                        <p><strong>响应时间:</strong> ${duration}ms</p>
                        <p><strong>数据条数:</strong> ${data.data ? (Array.isArray(data.data) ? data.data.length : '1条') : '无数据字段'}</p>
                        <details>
                            <summary>查看响应数据</summary>
                            <pre>${JSON.stringify(data, null, 2)}</pre>
                        </details>
                    `;
                });
            })
            .catch(error => {
                const endTime = Date.now();
                const duration = endTime - startTime;
                
                testDiv.className = 'test-item error';
                testDiv.innerHTML = `
                    <h3>❌ ${endpoint.name} (${endpoint.method} ${endpoint.url})</h3>
                    <p><strong>状态:</strong> 失败</p>
                    <p><strong>响应时间:</strong> ${duration}ms</p>
                    <p><strong>错误信息:</strong> ${error.message}</p>
                `;
            });
        }
        
        function clearResults() {
            document.getElementById('test-results').innerHTML = '';
        }
        
        // 页面加载时自动测试
        window.onload = function() {
            setTimeout(testAllApis, 500);
        };
    </script>
</body>
</html>
